<template>
  <el-container id="Home">
    <el-aside width="300px">
      <div class="top">
        <div class="banner">
          <iLogo :url="basicInfo.logoUrl" :name="basicInfo.sysName"></iLogo>
          <iUser></iUser>
        </div>
      </div>
      <div class="menu">
        <section class="body">
          <el-menu background-color="#FFF" router active-text-color="#517fa4">
            <el-submenu v-for="route in this.$store.state.menu" :key="route.id" :index="route.path">
              <template slot="title">
                <i :class="route.icon"></i>
                <span>{{ route.menuName }}</span>
              </template>
              <el-menu-item v-for="child in route.children" :key="child.id" :index="child.path"><i :class="child.icon"></i><span slot="title">{{ child.menuName }}</span></el-menu-item>
            </el-submenu>
          </el-menu>
        </section>
      </div>
      <div class="operation">
        <el-button type="danger" size="mini" @click="logOut">退出登录</el-button>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <iProject></iProject>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import setting from '../../setting'
import * as api from '../../api/private/home'
import * as role from '../../api/private/role'
import * as auth from '../../utils/auth'
import * as deviceType from '../../api/private/intrument'
export default {
  name: 'Home',
  data: () => ({
    basicInfo: {
      logoUrl: require('../../assets/images/global/bingce.png'),
      sysName: ''
    },
    menu: {
      data: [],
      active: ''
    }
  }),
  methods: {
    init() {
      this.setBasicInfo()
      this.getMenu()
      this.getRole()
      this.getCompany()
      this.getInstruments()
    },
    setBasicInfo() {
      this.basicInfo.sysName = setting.app_name
    },
    async getMenu() {
      const data = await api.getMenu()
      if (data.code === 0) {
        this.$store.commit('setMenuData', data.data)
      } else {
        this.$msg.error(data.msg)
      }
    },
    async getCompany() {
      const data = await api.getCompany()
      if (data.code === 0) {
        this.$store.commit('setCompanyData', data.data)
      } else {
        this.$msg.error(data.msg)
      }
    },
    async getRole() {
      const data = await role.getAllRole()
      if (data.code === 0) {
        this.$store.commit('setCompanyRoles', data.data)
      } else {
        this.$msg.error(data.msg)
      }
    },
    logOut() {
      auth.logOut()
    },
    // 获取设备类型
    async getInstruments() {
      let res = await deviceType.getList({})
      if (res.code == 0) {
        this.$store.commit('setInstrumentList', res.data)
      } else {
        this.$msg.error(res.msg)
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
#Home {
  width: 100vw;
  height: 100vh;

  .el-aside {
    box-sizing: border-box;
    margin: 0.7rem 0.5rem;
    overflow: hidden;

    .top {
      width: 100%;
      height: 10rem;
      position: relative;
      overflow: hidden;
      margin-bottom: 0.5rem;
      cursor: pointer;

      &:hover > .banner {
        top: -100%;
      }

      .banner {
        transition: all 0.3s ease-in-out;
        height: 200%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    .menu {
      width: 100%;
      height: calc(100% - 13.75rem);
      background: white;
      box-sizing: border-box;
      border-radius: 0.5rem;
      padding: 0.5rem 0.4rem;
      overflow: hidden;
      overflow-y: auto;
      margin-bottom: 0.5rem;

      .body {
        height: 100%;
        box-sizing: border-box;
        padding: 0.2rem 0.25rem;
        overflow-y: auto;

        .el-menu {
          border-right: none;
        }
      }
    }

    .operation {
      width: 100%;
      // height: 5rem;
      background: white;
      box-sizing: border-box;
      padding: 0.5rem;
      border-radius: 0.5rem;
      overflow: hidden;

      .el-button {
        width: 100%;
      }
    }
  }

  & > .el-container {
    box-sizing: border-box;
    margin: 0.7rem 0.5rem 0.7rem 0;

    .el-header {
      background: #fff;
      border-radius: 0.5rem;
      margin-bottom: 0.5rem;
      overflow: hidden;
      overflow-x: auto;
    }

    .el-main {
      background: #fff;
      border-radius: 0.5rem;
    }
  }
}
</style>
